<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下布医</title>
    <link  href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../layui/css/layui.css?cache=<%=Math.random()%>">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <style>
        .title-row {
            line-height: 26px;
        }
        .title-row img {
            width: 12px;
            padding: 0 4px;
        }
        .nodata {
            text-align: center;
            margin-top: 220px;
        }
        .right_cont_container {
            padding: 20px;
        }
        .content {
            padding-top: 30px;
            padding-left: 25px;
        }
        .title {
            font-size: 18px;
        }
        /*.answer {*/
            /*display: -webkit-box;*/
            /*-webkit-box-align: center;*/
            /*margin: 10px 0 0 15px;*/
        /*}*/
        /*.answer-left {*/
            /*width: 0;*/
            /*-webkit-box-flex: 1;*/
        /*}*/
        /*.answer-right {*/
            /*width: 0;*/
            /*-webkit-box-flex: 5;*/
        /*}*/
        .answer {
            margin: 10px 0 0 10px;
            max-width: 850px;
        }
        .answer-left {
            display: inline-block;
            width: 200px;
        }
        .answer-right {
            display: inline-block;
            width: 600px;
        }
        .long {
            display: inline-block;
            height: 16px;
            background-color: #a8ecec;
            margin-right: 12px;
            position: relative;
            top: 2px;
        }
        .item-box {
            margin-bottom: 30px;
        }
        #layui-layer1 {
            text-align: center!important;
        }
        .layui-layer-content.layui-layer-loading1 {
            display: inline-block!important;
        }
    </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <div id="app">
                    <div class="title-row">
                        <span>满意度调查</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>住院调查</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>{{deptName}}</span>
                        <%--<div class="add">添加</div>--%>
                    </div>
                    <div class="nodata" v-if="nodata">
                        <img src="../img/nodata.png">
                        <div>暂时没有数据</div>
                    </div>
                    <div class="content" v-else>
                        <div v-for="(index,quest) in questList">
                            <div class="item-box" v-if="quest.type == 1">
                                <div class="title">{{index+1}}.{{quest.title}}</div>
                                <div class="answer" v-for="answ in quest.answer">
                                    <div class="answer-left">{{answ.content}}</div>
                                    <div class="answer-right"><span class="long" :style="{width:answ.count/quest.totalcount*200+'px'}"></span>{{answ.count}}人</div>
                                </div>
                            </div>
                            <div class="item-box" v-else>
                                <div class="title">{{index+1}}.{{quest.title}}</div>
                                <div class="answer" v-for="answ in quest.answer">
                                    {{answ.content}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../layui/layui.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            nodata: false,
            questList: [],
            deptName: "",
        },
        ready: function() {
            layui.use('layer', function(){
                var layer = layui.layer;
                var index = layer.load(1);
                var _this = this;
                var urlText = location.search.split("&");
                var id = urlText[0].substr(4);
                var name = urlText[1].substr(5);
                _this.deptName = decodeURI(name);
                $.ajax({
                    type: 'POST',
                    url: "outpatient.jsp",
                    data: {
                        act: "query_by_question",
                        hospital: "1111",
                        deptId: id,
                        surveyTitle: "住院",
                    },
                    success: function (res) {
                        layer.close(index);
                        //console.log(res);
                        res = JSON.parse(res);
                        if(res.errcode == 0) {
                            _this.questList = res.data;
                        } else {
                            layer.open({
                                title: '提示',
                                content: res.errmsg
                            })
                        }

                    }
                })
            }.bind(this))

        },
        methods: {

        },
        components: {

        },
        events: {

        }
    })
    layui.use('layer', function(){
        var layer = layui.layer;
    })
</script>